<style lang="scss" scoped>
.task {
    width: 100vw;
    height: 99.9%;
    font-size: 0.8rem;
    overflow: auto;
    .content_box {
        width: 100%;
        box-sizing: border-box;
        .task_top_box {
            background: linear-gradient(135deg, #fec100 0%, #fe6a00 100%);
            padding: 2rem 2rem 6rem 2rem;
            color: #fff;
            .task_top_box_bg {
                background: url("../../static/images/task/top_log.png");
                background-size: auto 120%;
                background-repeat: no-repeat;
                background-position: center;
            }
            .top {
                display: flex;
                justify-content: space-around;
                align-items: center;
                .right,
                .left {
                    flex: 1;
                    text-align: center;
                    .num {
                        font-family: "嘿嘿嘿 Normal";
                        font-size: 1.2rem;
                        text {
                            font-size: 1.8rem;
                        }
                    }
                    .text {
                        color: #ffffffc9;
                    }
                }

                .xian {
                    width: 1px;
                    height: 2rem;
                    background: #ffffff7e;
                    margin: 0 auto;
                }
            }
            .bottom {
                text-align: center;
                .button {
                    width: 100px;
                    border-radius: 30px;
                    background: linear-gradient(
                        135deg,
                        #fe850c 0%,
                        #fe523e 100%
                    );
                    height: 2.2rem;
                    text-align: center;
                    line-height: 2.2rem;
                    margin: 1rem auto;
                    font-size: 1rem;
                }
                .p {
                    color: #ffffffc9;
                }
            }
        }
        .task_list {
            padding: 0.8rem;
            margin-top: -5rem;
            .xinshou_box {
                background-color: #fff;
                border-radius: 1rem;
                padding: 0.8rem;
                .title {
                    font-size: 1.2rem;
                    font-family: "嘿嘿嘿 Normal";
                    margin-bottom: 0.8rem;
                }
                .list {
                    .list_content {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding: 0.5rem 0;
                        .left {
                            margin-right: 0.5rem;
                            image {
                                width: 2.8rem;
                                vertical-align: middle;
                            }
                        }
                        .center {
                            flex: 1;
                            .top {
                                margin-bottom: 0.2rem;
                                font-size: 0.9rem;
                                .tag {
                                    display: inline-block;
                                    background: url("../../static/images/task/xingbi.png");
                                    background-size: 100% 100%;
                                    padding: 0.2rem 0.5rem;
                                    font-size: 0.5rem;
                                    padding-left: 1.5rem;
                                    color: #fe7b00;
                                }
                            }
                            .text {
                                color: #999999;
                                font-size: 0.7rem;
                            }
                        }
                        .right {
                            width: 4.5rem;
                            .button {
                                width: 100%;
                                background-color: #fe7b00;
                                text-align: center;
                                line-height: 1.8rem;
                                border-radius: 0.5rem;
                                color: #fff;
                                font-size: 0.6rem;
                            }
                        }
                    }
                }
            }
            .richangbox {
                background-color: #fff;
                border-radius: 1rem;
                padding: 0.8rem;
                margin: 1rem 0;
                .title {
                    font-size: 1.2rem;
                    font-family: "嘿嘿嘿 Normal";
                    margin-bottom: 0.8rem;
                }
                .list {
                    .list_content {
                        .top {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            .left {
                                flex: 1;
                            }
                            .right {
                                width: 4.5rem;
                                .button {
                                    width: 100%;
                                    background-color: #ff4e5f;
                                    text-align: center;
                                    line-height: 1.8rem;
                                    border-radius: 0.5rem;
                                    color: #fff;
                                    font-size: 0.6rem;
                                }
                            }
                        }
                        .bottom {
                            margin-top: 2rem;
                        }
                    }
                }
            }
        }
    }
}
</style>

<template>
    <view class="task">
        <!-- <u-navbar-s></u-navbar-s> -->
        <view class="content_box">
            <!-- top余额信息 -S -->
            <view class="task_top_box">
                <u-navbar-s></u-navbar-s>
                <view class="task_top_box_bg">
                    <view class="top">
                        <view class="left">
                            <view class="num">
                                <text>{{state.tasklistsarr?.species || 0}}</text>星币
                            </view>
                            <view class="text">
                                星币收益>
                            </view>
                        </view>
                        <view class="xian"></view>
                        <view class="right">
                            <view class="num">
                                <text>{{state.tasklistsarr?.available_amount || '0.00'}}</text>元
                            </view>
                            <view class="text">
                                现金收益
                            </view>
                        </view>
                    </view>
                    <view class="bottom">
                        <view class="button">
                            提现
                        </view>
                        <view class="p">
                            星币自动转换成现金（100星币=1元）
                        </view>
                    </view>
                </view>
            </view>
            <!-- top余额信息 -E -->
            <!-- 任务列表 -S -->
            <view class="task_list">
                <!-- 新手任务 -S -->
                <view class="xinshou_box">
                    <view class="title">
                        新手任务
                    </view>
                    <view class="list" v-for="(item, index) in state.tasklistsarr?.lists" :key="index">
                        <view class="list_content" v-if="item.key =='bankBind' || item.key =='aliIdCard'">
                            <view class="left">
                                <image v-if="item.key =='bankBind'" src="../../static/images/task/yinhangka.png" mode="widthFix" />
                                <image v-if="item.key =='aliIdCard'" src="../../static/images/task/zhifubao.png" mode="widthFix" />
                            </view>
                            <view class="center">
                                <view class="top">
                                    <text>
                                        {{item.name}}
                                    </text>
                                    <text class="tag">
                                        +{{item.amount}}星币
                                    </text>
                                </view>
                                <view class="text" v-html="item.copywriting">
                                </view>
                            </view>
                            <view class="right">
                                <view class="button">
                                    领取任务
                                </view>
                            </view>

                        </view>
                    </view>
                </view>
                <!-- 新手任务 -E -->
                <!-- 日常任务 -S -->
                <view class="richangbox">
                    <view class="title">
                        日常任务
                    </view>
                    <view class="list" v-for="(item, index) in state.tasklistsarr?.lists" :key="index">
                        <view class="list_content" v-if="item.key == 'inviteKey'">
                            <view class="top">
                                <view class="left">
                                    <view v-html="item.copywriting"></view>
                                </view>
                                <view class="right">
                                    <view class="button">
                                        去邀请
                                    </view>
                                </view>
                            </view>
                            <view class="bottom">
                                进度条
                            </view>
                        </view>
                    </view>
                </view>
                <!-- 日常任务 -E -->
            </view>
            <!-- 任务列表 -E -->
        </view>
    </view>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { tasklists } from "@/api/task";
const state = reactive<{
    tasklistsarr: Array<object>;
}>({
    tasklistsarr: [],
});
onLoad(() => {
    getData().then((res) => {
        localData();
    });
    localData();
});
// 请求数据
const getData = async () => {
    const tasklistsarr = await tasklists();
    uni.setStorageSync("tasklistsarr", tasklistsarr);
};
// 本地数据
const localData = () => {
    const tasklistsarr = uni.getStorageSync("tasklistsarr");
    state.tasklistsarr = tasklistsarr;
};
</script>
